<template>
    <div class="login">
        <!-- 背景 -->
        <img src="@/assets/bgk1.jpg" alt="">
        <div class="box"></div>
        <div class="gx">
            <div class="content">
                <h1>欢迎登录</h1>
                <div class="top">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-user"></use>
                    </svg>
                    <input type="text" placeholder="Username">
                </div>
                <div class="top">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-suoding"></use>
                    </svg>
                    <input type="password" placeholder="Password">
                </div>
                <div class="mid">
                    <div class="checkbox">
                        <input type="checkbox">
                        <span>记住密码</span>
                    </div>
                    <a href="#">忘记密码?</a>
                </div>
                <div class="footerBtn" @click="pass">
                    <a href="#">Login</a>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import router from '@/router';
import store from '@/store/index'
function pass() {
    store.state.isLogin = true
    router.push('/infoUser')
}


</script>

<style lang="less" scoped>
.login {
    width: 100%;
    height: 100%;
    position: relative;
    img {
        position: absolute;
        width: 100%;
        height: 100vh;
        z-index: -1;
        // filter: blur(5vw);
    }

    .box {
        width: 63vw;
        height: 73vw;
        border: 0.5vw solid rgb(228, 122, 122);
        position: absolute;
        top: 93vw;
        left: 18.5vw;
        overflow: hidden;
        border-radius: 6vw;
        &::before {
            content: '';
            position: absolute;
            width: 70vw;
            height: 40vh;
            top: -50%;
            left: -50%;
            transform-origin: bottom right;
            background: linear-gradient(0deg, transparent, transparent,#e6a606,#e6a606, #e6a606);
            z-index: 1;
            animation: animate 6s linear infinite;
            // animation-delay: -3s;
        }
        &::after{
            content: '';
            position: absolute;
            width: 70vw;
            height: 40vh;
            top: -50%;
            left: -50%;
            transform-origin: bottom right;
            background: linear-gradient(0deg, transparent, transparent,#e6a606,#e6a606, #e6a606);
            z-index: 1;
            animation: animate 6s linear infinite;
            animation-delay: -2s;
        }
    }
    .gx{
        position: absolute;
        margin-top: 30vw;
    }

    .content {
        width: 60vw;
        height: 32vh;
        position: absolute;
        top: 30vh;
        left: 20vw;
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        background-color: rgb(231, 217, 217);
        border-radius: 5vw;
        h1 {
            text-align: center;
            width: 100%;
            letter-spacing: 2vw;
        }

        .top {
            width: 80%;
            border-bottom: 1px #e10a0a solid;
            display: flex;
            align-items: center;
            .icon {
                width: 6vw;
                height: 6vw;
            }

            input {
                flex: 1;
                background: transparent;
                border: none;
                height: 4vh;
                margin-left: 3vw;
            }
        }

        .mid {
            display: flex;
            justify-content: space-between;
            width: 80%;

            .checkbox{
                display: flex;
                align-items: center;
                span{
                    font-size: 3vw;
                    // color: white;
                    margin-left: 2vw;
                }
            }
            a{
                font-size: 2vw;
                color: #968787;
                &:hover{
                    color: #e10a0a;
                    font-weight: bold;
                }
                
            }
        }

        .footerBtn {
            width: 80%;
            height: 3vh;
            display: flex;
            justify-content: center;
            border: 1px solid white;
            align-items: center;
            a{
                font-size: 4vw;
                font-weight: bold;
            }
        }
    }

    @keyframes animate {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
}

</style>